<template>
    <div class="categoryBox">
        <h4 class="tagTitle">分类&ensp; <span v-show="name"><el-tag type="warning" closable  @close="closeTag()">{{ name }}</el-tag></span></h4>
        <ul class="list-group list-group-flush">
            <li v-for="item in list" @click="searchCategory(item.name)"
                class="categoryItem list-group-item d-flex justify-content-between align-items-center">
                {{ item.name }}
                <span class="badge rounded-pill tagBgColor">( {{ item.count }} )</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "categorybox",
    props: {
        list: {
            type: Array
        }
    },
    data() {
        return {
            name:""
        }
    },
    methods: {
        searchCategory(name) {
            this.name = name
            this.$emit('searchCategory', name)
        },
        closeTag(){
            this.name = null
            this.$emit('searchCategory', "")
        }
    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.categoryBox {
    font-family: "Times New Roman", Times, serif;
}

.tagBgColor {
    color: #007bff9a;
}

.categoryItem:hover {
    color: #007bff9a;
    cursor: pointer;
}
</style>